import BaseLayout from '@/layouts/BaseLayout/BaseLayout'
import Case1 from './Case1';
import Case2 from './Case2';

function Demo() {
	const list1 = [{
		val1: 'className',
		val2: '分割线样式类',
		val3: 'string',
		val4: '--',
	},{
		val1: 'checked',
		val2: '指定当前是否选中',
		val3: 'boolean',
		val4: 'false',
	},{
		val1: 'disabled',
		val2: '禁用 Checkbox',
		val3: 'boolean',
		val4: 'false',
	}];
	list1.sort((a:any, b:any) => {
		return a.val1.localeCompare(b.val1);
	});
	return (
		<BaseLayout>
		    <h2 className="intro-title">Checkbox 多选框</h2>
		    <p className="intro-content">多选框。</p>
			
			<h3 className="show-case-title">代码演示</h3>
			
			{/*演示*/}
			<Case1></Case1>
			<Case2></Case2>

		    {/*介绍*/}
			<h3 className="base-title">API</h3>
			<table className="attri-table">
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					{list1.map((item:any) => {
				    	return (<tr key={item.val1}>
							<td>{item.val1}</td>
							<td>{item.val2}</td>
							<td>{item.val3}</td>
							<td>{item.val4}</td>
						</tr>);
				    })}
				</tbody>
			</table>
		</BaseLayout>
	)
}

export default Demo
